var id = 1;
$(function () {
    $.ajax({
        type: "POST",
        url: "ShowFatherTypeJsonServlet",
        dataType: "JSON",
        success: function (data) {
            $.each(data, function (index, obj) {
                id = obj.typeid;
                var $fatherType = "<li data-id='" + (id)+ "' class='father'><span>" + obj.typename + "</span></li>";
                $("#nav_left ul").append($fatherType);
                $(this).mouseover(child(id));
            });
        }
    });
    var cid;
    var child = function (id) {
        $.ajax({
            type: "POST",
            url: "ShowChildTypeJsonServlet",
            dataType: "JSON",
            data: {typeid: id},
            success: function (data) {
                var $child = "<div class='sub hide' data-id='" + id + "'></div>";
                $("#nav_right").append($child);
                $.each(data, function (index, obj) {
                    cid = obj.chtypeid;
                    var $childType = "<dl><dt data-toggle='"+cid+"'><a>" + obj.ctypename + "<i> &gt;</i></a></dt><dd></dd></dl>"
                    $('.sub[data-id="' + id + '"]').append($childType);
                    $(this).mouseover(grandson(cid, id));
                });
            }
        });
    }
    var grandson = function (cid, id) {
        $.ajax({
            type: "POST",
            url: "ShowGrandSonJsonServlet",
            dataType: "JSON",
            data: {chtypeid: cid},
            success: function (data) {
                $.each(data, function (index, obj) {
                    var $grandSonType = "<a href='product-list.jsp?gtypeid="+obj.gtypeid+"'>" + obj.gtypename + "</a>"
                    $('.sub[data-id="' + id + '"]  dl dt[data-toggle='+cid+']~dd').append($grandSonType);
                });
            }
        });
    }

    $('.containor').on('mouseenter', function () {
        $(".nav_right").removeClass('hide');
    }).on('mouseleave', function () {
        $(".nav_right").addClass('hide');
        $(".sub").addClass('hide');
    }).on('mouseenter', 'li', function (e) {
        var li_data = $(this).attr('data-id');
        $(".sub").addClass('hide');
        $('.sub[data-id="' + li_data + '"]').removeClass('hide');
    });
});

